<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>相机功能示例</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-button @click="takePicture()">拍照</ion-button>
      <img :src="image.webPath" />
      <span>{{ str }}</span>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { Camera, CameraResultType } from '@capacitor/camera';
import { ref } from 'vue';

const image = ref();

const str = ref('');
const takePicture = async () => {
  image.value = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  str.value = JSON.stringify(image.value);

  // image.webPath will contain a path that can be set as an image src.
  // You can access the original file using image.path, which can be
  // passed to the Filesystem API to read the raw data of the image,
  // if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
  // var imageUrl = image.webPath;

  // // Can be set to the src of an image now
  // imageElement.src = imageUrl;
};
</script>
